<template>
  <a-drawer
    :title="title"
    :visible="visible"
    :width="600"
    :body-style="{
      paddingBottom: '60px',
      height: 'calc(100% - 55px)',
    }"
    @close="onClose"
  >
    <section class="content">
      <a-form layout="vertical">
        <a-form-item label="班次名称" v-bind="validateInfos.shift_name">
          <a-input
            v-model:value="modelRef.shift_name"
            placeholder="请输入名称"
            :disabled="isCheck"
          />
        </a-form-item>
        <a-form-item label="上下班次数">
          <a-radio-group
            button-style="solid"
            v-model:value="modelRef.work_times"
            @change="handleTimesChange"
            :disabled="isCheck"
          >
            <a-radio-button :value="1">1次上下班</a-radio-button>
            <a-radio-button :value="2">2次上下班</a-radio-button>
            <a-radio-button :value="3">3次上下班</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-row :gutter="12">
          <template v-for="(item, index) of modelRef.time_detail" :key="index">
            <a-col :span="12">
              <a-form-item label="上班时间">
                <!-- :disabledHours="() => hourDisabled('start', index)"
                  :disabledMinutes="
                    (hour) => minutesDisabled('start', index, hour)
                  " -->
                <a-time-picker
                  v-model:value="modelRef.time_detail[index].start"
                  :valueFormat="timeFormat"
                  :format="timeFormat"
                  :allowClear="false"
                  style="width: 180px"
                  @change="handleTimeArrChange"
                  :disabled="isCheck"
                />
                <a-tag color="blue" class="ml-10" v-if="item.startNextDay">
                  次日
                </a-tag>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="下班时间">
                <!-- :disabledHours="() => hourDisabled('end', index)"
                  :disabledMinutes="
                    (hour) => minutesDisabled('end', index, hour)
                  " -->
                <a-time-picker
                  v-model:value="modelRef.time_detail[index].end"
                  :valueFormat="timeFormat"
                  :format="timeFormat"
                  :allowClear="false"
                  style="width: 180px"
                  @change="handleTimeArrChange"
                  :disabled="isCheck"
                />
                <a-tag color="blue" class="ml-10" v-if="item.endNextDay">
                  次日
                </a-tag>
              </a-form-item>
            </a-col>
          </template>
        </a-row>
        <!-- <a-card>
         </a-card> -->
      </a-form>
    </section>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="onClose">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit"> 保存 </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, watch, computed, reactive, toRefs, toRaw } from "vue";
import { Form, message } from "ant-design-vue";
import moment from "moment";
import request from "../../../../common/utils/request";
import utils from "../../../../common/utils/utils";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddShift",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const title = computed(() => {
      if (!props.id) {
        return "添加班次";
      } else {
        if (props.isCheck) {
          return "查看班次";
        }
        return "编辑班次";
      }
    });

    const state = reactive({
      timeFormat: "HH:mm",
    });

    const modelRef = reactive({
      shift_name: "",
      work_times: 1,
      shift_type: 1,
      time_detail: timeDetail1,
    });
    const requiredRule = [{ required: true, message: "必填项" }];
    const rulesRef = reactive({
      shift_name: requiredRule,
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const hourDisabled = (type, index) => {
      let hours = [];
      const { time_detail } = modelRef;
      if (time_detail.length == 1) {
        return hours;
      }
      if (time_detail[index + 1]) {
        // 非最后一段
        // if(type == "end" && time_detail[index + 1].startNextDay) {
        // }
      } else {
        // 最后一段
      }
      return hours;
    };
    const minutesDisabled = (type, index, hour) => {
      let minutes = [];
      if (modelRef.time_detail.length == 1) {
        return minutes;
      }
      return minutes;
    };

    const handleTimesChange = (e) => {
      modelRef.time_detail = timeDetail[Number(e.target.value) - 1];
    };

    const handleTimeArrChange = (val) => {
      modelRef.time_detail = utils.getShiftTimeDetail(modelRef.time_detail);
    };

    const onSubmit = () => {
      validate().then(() => {
        let params = {
          ...modelRef,
          needMsg: true,
        };
        params.time_detail = params.time_detail.map((item) => ({
          start: item.start,
          end: item.end,
        }));
        // console.log("-----------------params", toRaw(params));
        let requestMethod = "post";
        if (props.id) {
          requestMethod = "put";
          params.id = props.id;
        }
        request[requestMethod]("/org", "/shift", params).then((res) => {
          message.success(res.msg || "提交成功！");
          emit("success");
        });
      });
    };

    const getDetail = () => {
      request
        .get("/org", "/shift", {
          id: props.id,
        })
        .then((res) => {
          const { detail } = res;
          modelRef.shift_name = detail.shift_name;
          modelRef.work_times = detail.work_times;
          modelRef.time_detail = utils.getShiftTimeDetail(detail.time_detail);
        });
    };

    const init = () => {
      if (props.id) {
        getDetail();
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
        }
      }
    );

    const onClose = () => {
      emit("cancel");
    };
    return {
      title,
      modelRef,
      validateInfos,
      ...toRefs(state),
      onClose,
      onSubmit,
      handleTimesChange,
      handleTimeArrChange,
      hourDisabled,
      minutesDisabled,
    };
  },
});

const timeDetail1 = [
  {
    start: "09:00",
    end: "18:00",
    startNextDay: false,
    endNextDay: false,
  },
];
const timeDetail2 = [
  {
    start: "09:00",
    end: "11:30",
    startNextDay: false,
    endNextDay: false,
  },
  {
    start: "13:30",
    end: "17:30",
    startNextDay: false,
    endNextDay: false,
  },
];
const timeDetail3 = [
  {
    start: "09:00",
    end: "11:30",
    startNextDay: false,
    endNextDay: false,
  },
  {
    start: "13:30",
    end: "17:30",
    startNextDay: false,
    endNextDay: false,
  },
  {
    start: "19:30",
    end: "20:00",
    startNextDay: false,
    endNextDay: false,
  },
];
const timeDetail = [timeDetail1, timeDetail2, timeDetail3];
</script>

<style scoped>
.content {
  height: 100%;
  overflow: hidden auto;
}
</style>
